<template>
    <div class="proList">
        <el-table :data="proList" style="width: 100%" height="470px">
            <el-table-column width="200px" prop="proname" label="商品名称" fixed="left">
                <template v-slot:default="scope">
                    <div class="proname">{{ scope.row.proname }}</div>
                </template>
            </el-table-column>
            <el-table-column width="200px" prop="category" label="商品类别"></el-table-column>
            <el-table-column width="200px" prop="brand" label="品牌"></el-table-column>
            <el-table-column width="200px" label="图片">
                <template v-slot:default="scope">
                    <el-image style="width:50px;height:50px;" :src="scope.row.img1"
                        :preview-src-list="[scope.row.img1]"></el-image>
                </template>
            </el-table-column>
            <el-table-column width="200px" prop="originprice" label="原价"></el-table-column>
            <el-table-column width="200px" label="折扣价">
                <template v-slot:default="scope">
                    <template v-if="scope.row.discount == 10">
                        <span>暂无折扣</span>
                    </template>
                    <template v-else>
                        <span>{{ ((scope.row.originprice * scope.row.discount) / 10).toFixed(2) }}({{ scope.row.discount
                        }}折)</span>
                    </template>
                </template>
            </el-table-column>
            <el-table-column width="200px" label="开启秒杀">
                <template v-slot:default="scope">
                    <el-switch v-model="scope.row.isseckill" active-text="开启" inactive-text="关闭" :active-value="1"
                        :inactive-value="0" @change="isseckillChangeHander($event, scope.row.proid)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column width="200px" label="开启推荐">
                <template v-slot:default="scope">
                    <el-switch v-model="scope.row.isrecommend" active-text="开启" inactive-text="关闭" :active-value="1"
                        :inactive-value="0" @change="isrecommendChangeHander($event, scope.row.proid)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column width="200px" label="操作" fixed="right">
                <template v-slot:default="scope">
                    <el-button type="text" @click="lookupHandler(scope.row.proid)">查看</el-button>
                    <!-- <el-button type="text" @click="deleteHandler(scope.row.proid)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pageBox">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                :current-page="count" :page-sizes="[5, 10, 20, 50]" :page-size="limitNum"
                layout="  prev, pager, next,total,sizes,jumper" :total="total">
            </el-pagination>
        </div>

        <el-drawer title="商品详情" :visible.sync="isShow" direction="rtl" size="50%">
            <el-container>
                <el-main>
                    <el-descriptions v-if="proInfo" :column="1" border :labelStyle="{verticalAlign:'top'}">
                        <el-descriptions-item label="商品名称">{{ proInfo.proname }}</el-descriptions-item>
                        <el-descriptions-item label="商品类别">{{ proInfo.category }}</el-descriptions-item>
                        <el-descriptions-item label="品牌">{{ proInfo.brand }}</el-descriptions-item>
                        <!-- <el-descriptions-item label="备注商品描述">
                            {{ proInfo.desc }}
                        </el-descriptions-item> -->
                        <el-descriptions-item label="备注商品描述">
                            <el-image style="width:100px;height:100px" :src="proInfo.img1"></el-image>
                            <el-image style="width:100px;height:100px" :src="proInfo.img2"></el-image>
                            <el-image style="width:100px;height:100px" :src="proInfo.img3"></el-image>
                            <el-image style="width:100px;height:100px" :src="proInfo.img4"></el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="商品价格">
                            <span>{{ (proInfo.originprice*proInfo.discount/10).toFixed(2) }}</span>
                            <del class="originPrice"  v-if="proInfo.discount<10">{{ proInfo.originprice.toFixed(2) }}</del>
                        </el-descriptions-item>
                        <el-descriptions-item label="库存">
                            <span >{{ proInfo.issale ? proInfo.stock: 0 }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="销量">
                            <span>{{ proInfo.sales }}</span>
                        </el-descriptions-item>
                    </el-descriptions>

                </el-main>
            </el-container>
        </el-drawer>

    </div>
</template>

<script>
import { getProListAPI, updateIsseckillAPI, updateIsrecommendAPI,getProDetail } from "@/api/pro";
import _ from "lodash";

export default {
    name: "ProList",
    data() {
        return {
            proList: [],
            total: 0,
            count: 1,
            limitNum: 5,
            isShow:false,
            proInfo:null,
        }
    },
    computed: {
        params() {
            return { count: this.count, limitNum: this.limitNum }
        }
    },
    watch: {
        params() {
            this.getProList();
        },
    },
    methods: {
        handleSizeChange(size) {
            // this.count = 1;  // 每次切换page-sizes => 从第一页开始显示
            console.log(size);
            this.limitNum = size;
        },
        handleCurrentChange(page) {
            console.log(page);
            this.count = page;
        },
        async getProList() {
            try {
                var res = await getProListAPI({
                    count: this.count,
                    limitNum: this.limitNum,
                });
                console.log(res);
                this.proList = res.data;
                this.total = res.total;
            } catch (err) {
                // console.log( err);
                this.$message.error(err.message);
            }
        },
        isseckillChangeHander: _.debounce(async function (status, proid) {
            console.log(status, proid);

            try {
                await updateIsseckillAPI({
                    proid: proid,
                    flag: !!status,   // status => 0 1 => 要求传入布尔值 => 隐式转换  !!1 => true
                });
                this.$message.success(status ? "开启秒杀" : "关闭秒杀")
            } catch (err) {
                // console.log( err);
                this.$message.error(err.message);
            }
        }, 1000),
        async isrecommendChangeHander(status, proid) {
            console.log(status, proid);
            try {
                await updateIsrecommendAPI({
                    proid: proid,
                    flag: !!status,
                });
                this.$message.success(status ? "开启推荐" : "关闭推荐")
            } catch (err) {
                // console.log( err);
                this.$message.error(err.message);
            }
        },
        async lookupHandler(proid) {
            console.log(proid);
            this.isShow = true;

            try {
                var res = await getProDetail({
                    proid
                });
                console.log(res);
                this.proInfo = res.data[0];
            } catch (err) {
                // console.log( err);
                this.$message.error(err.message);
            }
        }
    },
    mounted() {
        this.getProList();
    }

}
</script>

<style lang="scss" scoped>
.proname {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pageBox {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}

.originPrice{
    margin-left: 20px;
}
</style>